<template>
  <div class="w-full h-full relative overflow-hidden">
    <div class="absolute top-0 left-0 right-0 h-20 bg-blue-200">
      <myheader></myheader>
    </div>
    <div class=" absolute top-20 left-0 bottom-0 w-32 bg-red-200">
      <leftmenu></leftmenu>
    </div>
    <div class="absolute top-20 left-32 bottom-0 right-0">
      <div class="absolute top-0 left-0 right-0 h-10 border-b border-t overflow-hidden">
        <ul style="width:9999px;height:100%" class="flex justify-start items-center">
          <li v-for="(item,index) in menulist" :key="item.id" @contextmenu="handleContextMenu($event,item)"
              class="group w-32 h-full juzhong cursor-pointer select-none relative border-r hover:text-white hover:bg-blue-300"
              :class="[activeMenu===item.id?'bg-blue-300 text-white':'']" @click="qiehua(item)">
            <span>{{ item.name }}</span>
            <Icon
                class="absolute right-0.5 group-hover:text-opacity-100 text-opacity-0 group-hover:text-white hover:text-red-500"
                size="15" @click.stop="guanbi(index)">
              <CloseCircle/>
            </Icon>
          </li>
        </ul>
      </div>
      <div class="absolute top-10 left-0 right-0 bottom-0 overflow-x-hidden overflow-y-auto" id="huadong">
        <router-view v-slot="{ Component }">
          <keep-alive :include="keepalivelist">
            <component :is="Component"/>
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
  <!--  右键菜单-->
  <n-dropdown
      placement="bottom-start"
      @select="handleSelect"
      trigger="manual"
      :x="x"
      :y="y"
      :options="options"
      :show="showDropdown"
      :on-clickoutside="onClickoutside"
  />
</template>

<script setup>
import myheader from './myheader.vue'
import leftmenu from './leftmenu.vue'
import {NDropdown} from "naive-ui"
import {Icon} from '@vicons/utils' // 外壳
import {CloseCircle} from "@vicons/ionicons5"
import {computed, nextTick, ref} from "vue";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";

const store = useStore()
const route = useRoute()
const router = useRouter()
// 已经打开的标签列表
const menulist = computed(() => store.state.navrouter.selectmenu)
// 当前激活的标签
const activeMenu = computed(() => store.state.navrouter.activeindex2)

// 被缓存的组价列表
const keepalivelist = computed(() => {
  return store.state.navrouter.selectmenu.map(item => {
    return item.pathName
  }) || []
})
// 关闭标签
const guanbi = (index) => {
  store.dispatch("navrouter/closemenu", index)
}
// 点击已经存在的标签
const qiehua = (item) => {
  store.commit("navrouter/clickmenu", item)
}

// 被右键点击的标签
const clickitem = ref(null)
// 右键菜单的开关
const showDropdown = ref(false)
const x = ref(0)
const y = ref(0)
// 鼠标放上后出现的菜单
const options = [
  {
    label: "除外关闭", key: "other",
  },
  {
    label: "全部关闭", key: "all",
  },
  {
    label: "关闭左侧菜单", key: "left",
  },
  {
    label: "关闭右侧菜单", key: "right",
  },
]
// 右键点击事件
const handleContextMenu = (e, item) => {
  e.preventDefault()
  showDropdown.value = false
  nextTick().then(() => {
    showDropdown.value = true
    clickitem.value = item
    x.value = e.clientX
    y.value = e.clientY
  })
}
// 右键菜单的点击事件
const handleSelect = (key) => {
  if (key === "all") {
    for (let i = menulist.value.length - 1; i >= 0; i--) {
      store.dispatch("navrouter/closemenu", i)
    }
  } else if (key === "left") {
    for (let i = 0; i < menulist.value.length; i++) {
      if (menulist.value[0].id === clickitem.value.id) {
        break
      }
      store.dispatch("navrouter/closemenu", 0)
    }
  } else if (key === "right") {
    for (let i = menulist.value.length - 1; i; i--) {
      if (menulist.value[i].id === clickitem.value.id) {
        break
      }
      store.dispatch("navrouter/closemenu", i)
    }
  }else if(key==="other"){
    for (let i = menulist.value.length - 1; i; i--) {
      if (menulist.value[i].id === clickitem.value.id) {
      }else{
        store.dispatch("navrouter/closemenu", i)
      }
    }
  }
  onClickoutside()
}
// 右键菜单外部点击事件
const onClickoutside = () => {
  showDropdown.value = false
  clickitem.value = -1
}


// 初始化区域，打开首页
store.dispatch("navrouter/sendshouye")
</script>

<style scoped>

</style>
